<template>
    <div class="wrapper">
        <!-- 水平居中 -->
        <div class="wrapper-level-center"/>
        <!-- 上下左右居中 -->
        <div class="wrapper-all-center"/>
        <!-- 绝对定位水平居中 -->
        <div class="wrapper-absolute-center"/>
    </div>
</template>

<script>
export default {
    name: "Center"
};
</script>

<style scoped lang="scss">
.wrapper{
    width: 100%;
    height: 100%;
    &-level-center{
        border: 1px solid red;
        margin: 0 auto;
        height: 40px;
        width: 40px;
     }
    &-all-center{
        position: absolute;
        float: left;
        border: 1px solid red;
        width: 200px;
        height: 100px;
        left: 50%;
        top: 50%;
        margin: -50px 0 0 -100px;
    }
    &-absolute-center{
        width: 200px;
        height: 100px;
        margin: 0 auto;
        border: 1px solid blue;
        position: absolute;
        left: 0;
        right: 0;
    }
}
</style>